<template>
	<view class="invite-page">
		<view class="banner">
			<view class="banner-content">
				<text class="banner-title">邀门店 注册账户</text>
				<text class="banner-subtitle">赚取快递补贴</text>
				<view class="bonus-card">
					<view class="bonus-card-left">
						<text class="bonus-amount">¥10</text>
						<text class="bonus-type">配送补贴</text>
					</view>
					<view class="bonus-card-right">
						<text class="bonus-info">每邀请一个门店</text>
						<text class="bonus-type-red">被邀请门店获得</text>
						<text class="bonus-amount-red">¥10</text>
						<text class="bonus-type-red">现金券</text>
					</view>
				</view>
				<button class="invite-btn" @click="inviteByWeChat">微信邀约</button>
			</view>
		</view>
		<view
			style="background: linear-gradient( 180deg, #B7C3FF 0%, #FED966 0%, #CED6FF 14%, #ECEFFF 100%);padding-top: 300rpx;height: 100vh;">
			<view class="process">
				<view class="process-title">活动流程</view>
				<view class="process-items">
					<view class="process-item">
						<uni-icons type="shop" size="40" color="#FF5555"></uni-icons>
						<text class="process-item-text">邀请门店</text>
					</view>
					<view class="process-item">
						<uni-icons type="flag-filled" size="40" color="#FF5555"></uni-icons>
						<text class="process-item-text">成功发送5单配送</text>
					</view>
					<view class="process-item">
						<uni-icons type="checkbox-filled" size="40" color="#FF5555"></uni-icons>
						<text class="process-item-text">利润自动发到账户</text>
					</view>
				</view>
			</view>
			<view class="invite-list">
				<view class="invite-list-title">邀请列表</view>
				<view class="invite-list-header">
					<text class="list-header-item">门店名称</text>
					<text class="list-header-item">开通手机号</text>
					<text class="list-header-item">激活进度</text>
					<text class="list-header-item">激活状态</text>
				</view>
				<view class="invite-list-empty">
					<image src="/static/empty-icon.png" mode="widthFix"></image>
					<text>暂无邀请记录</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			inviteByWeChat() {
				uni.showToast({
					title: '微信邀约功能暂未开通',
					icon: 'none'
				});
			}
		}
	};
</script>

<style lang="scss">
	$primary-color: #FF5555;
	$secondary-color: #FFCC00;
	$white: #fff;
	$gray: #999;
	$imgUrl: "https://ssd-1325951894.cos.ap-beijing.myqcloud.com/uni_app";

	.invite-page {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.banner {
			position: relative;
			height: 350rpx;
			padding: 20rpx;
			background: url('#{$imgUrl}/static/fenxiangbeijing.png') center center / cover no-repeat;

			.banner-content {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.banner-title {
					font-size: 70rpx;
					color: $white;
					font-style: italic;
					font-weight: 800;
					margin-bottom: 20rpx;
				}

				.banner-subtitle {
					font-weight: 500;
					font-size: 36rpx;
					color: #F23D2F;
					padding: 20rpx 100rpx;
					background-color: #d5ffc7;
					margin-bottom: 40rpx;
					border-radius: 46rpx;

				}

				.bonus-card {
					width: 600rpx;
					height: 200rpx;
					background-color: $white;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 20rpx;

					.bonus-card-left {
						display: flex;
						flex-direction: column;
						align-items: center;

						.bonus-amount {
							font-size: 48rpx;
							color: #fc635e;
							font-weight: bold;
						}

						.bonus-type {
							font-size: 28rpx;
							color: #D03322;
						}
					}

					.bonus-card-right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.bonus-info {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}

						.bonus-amount-red {
							font-size: 36rpx;
							color: $primary-color;
							font-weight: bold;
						}

						.bonus-type-red {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}

				.invite-btn {
					width: 500rpx;
					height: 80rpx;
					background: linear-gradient(178deg, #FFFADC 12%, #FFBE59 100%);
					box-shadow: 0rpx 7rpx 22rpx 0rpx rgba(252, 34, 24, 0.25);
					border-radius: 109rpx 109rpx 109rpx 109rpx;
					font-weight: bold;
					font-size: 42rpx;
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FE5E00;
					animation: btnScale 1s infinite alternate;
				}

				@keyframes btnScale {
					0% {
						transform: scale(1);
					}

					100% {
						transform: scale(1.2);
					}
				}
			}
		}

		.process {
			width: 649rpx;
			height: 255rpx;
			background: #FFFCF9;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			border: 2rpx solid #FDBB8B;
			margin: 0 auto;
			padding: 20rpx;
			background-color: #fffcf9;

			.process-title {
				font-size: 32rpx;
				color: $primary-color;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
			}

			.process-items {
				display: flex;
				justify-content: space-around;
				margin-top: 50rpx;

				.process-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.uni-icons {
						font-size: 40rpx;
						color: $primary-color;
					}

					.process-item-text {
						font-size: 24rpx;
						color: #333;
						margin-top: 10rpx;
					}
				}
			}
		}

		.invite-list {
			width: 649rpx;
			height: 945rpx;
			background: #FFFCF9;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			border: 2rpx solid rgba(203,180,166,0.3);
			padding: 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.invite-list-title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: $primary-color;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.invite-list-header {
				width: 612rpx;
				height: 72rpx;
				background: #FEE7D7;
				border-radius: 149rpx 149rpx 149rpx 149rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				margin-bottom: 20rpx;

				.list-header-item {
					font-size: 28rpx;
					color: #333;
					flex: 1;
					text-align: center;
				}
			}

			.invite-list-empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 300rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 28rpx;
					color: $gray;
				}
			}
		}
	}
</style>